<template>
  <div  class="app-container"  v-loading="loading">
    <el-container>
      <el-main style="width: 90vw;height: 80vh;background: linear-gradient(to right, transparent, #fff);
          font-size: 15px; width: 420px; margin-left: 100px; ">


        <div style="margin-top: 30px;">
          <div style="color: rgb(163, 126, 197);
    -webkit-background-clip: text;
     font-size: 15px;width: 420px;margin-left: 100px;">如需使用会员功能需充值卡密，
            如已购买卡密则直接输入后激活使用，购买卡密请<span>
      <a href="http://pay.toolssh.cn"
         target="_blank" style="color: rgb(120, 155, 230);">  点击这里 </a></span>购买</div>

          <div style="margin-top: 30px;">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-row :gutter="24">
                <el-col :span="12">
                  <el-form-item label="卡密" prop="cardPassword">
                    <el-input v-model="form.cardPassword" :rows="3" placeholder="请输入卡密激活"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item style="margin-top: 100px;margin-left: 65%;">
                    <el-button type="primary" @click="activateMembership">激活</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>

import {Message} from "element-ui";
 export default {
  name: "account",
  data() {
    return {
      form:{
        cardPassword:'',
      },
      dialogVisible:false,
      checkeds:[],
      publishTime:'',
      rules:{
        cardPassword: [
          { required: true, message: "卡密不能为空", trigger: "blur" },
          { min: 32, max: 32, message: "卡密长度为32位", trigger: "blur" }
        ],
      },
      queryParams:{},
      isIndeterminate: true,
      accountList:[]
    };
  },
  created() {
  },
  methods: {

    /**
     * 表单提交
     */
    activateMembership(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert("已提交！")
        } else {
          Message.error("请输入正确的卡密，如有疑问请联系客服！")
          //  this.serviceInvoke('controller.example.test','1212414')
          return false;
        }
      });
    },



  }
};
</script>
